<template>
    <p>混合式api</p>
    <p>count:{{ count }}</p>
    <p>text:{{ text }}</p>
    <hr>

    <p>obj:{{ obj }}</p>
    <p>obj的名字:{{ obj.name }}</p>
    <p>obj的年龄:{{ obj.age }}</p>
    <p>count+5:{{ AddFive }}</p>
    <p>arr[0]:{{ arr[0] }}</p>
    <p>arr[1]:{{ arr[1] }}</p>
    <button @click="AddCount(1)">count+1</button>
    <button @click="AddCount(2)">count+2</button>
    <button @click="updateobj">更新obj</button>
</template>

<script setup>
import { ref,reactive,computed,watch } from 'vue'
const count = ref(0)
const text = ref('hello world')

const obj = reactive({
    name:'nmdsb',
    age:18
})

const arr = reactive([1,2,3,4])

console.log('obj======',(obj))
// alert(count.value)

const AddFive = computed(
    () => {
        return count.value + 5
    }
)

function AddCount(n){
    count.value += n
}
function updateobj(){
    obj.name = 'tmdsb',
    obj.age = 100
}

watch(count,(newvalue,oldvalue)=>{
    console.log('oldvalue:' , oldvalue)
    console.log('newvalue:' , newvalue)
})

// watch(AddFive,(newvalue,oldvalue)=>{
//     console.log('oldvalue:' , oldvalue)
//     console.log('newvalue:' , newvalue)
// })

watch(obj,(newvalue,oldvalue)=>{
    console.log('obj更新了')
    console.log('oldvale:', oldvalue)
    console.log('newvalue:', newvalue)
})

watch(() => obj.name,(newvalue,oldvalue) =>{
    console.log('oldvalue:', oldvalue)
    console.log('newvalue:', newvalue)
})
    


</script>

